<template>
  <div>
    <el-tag
      :class="['tag', 'tag_public']"
      v-for="(item, index) in tagConfig"
      :key="index"
      :type="getTypeFn(item)"
      :style="getStyleFn(item)"
      :disable-transitions="true"
    >
      {{ item }}
    </el-tag>
  </div>
</template>
<script setup>
const props = defineProps({
  scope: { type: Object },
  row: { type: Object },
  prop: { type: String },
  options: {
    // 根据返回字段，设置背景色
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits([]);

const tagConfig = computed(() => {
  let list = props?.row[props.prop];
  if (!list) {
    return [];
  }
  if (typeof list === 'string') {
    return [list];
  }
  return list;
});

// 获取样式
function getStyleFn(val) {
  let obj = props.options;
  let style = obj[val]?.style;
  if (style?.color) style.borderColor = style.color;
  return style || '';
}

// 获取type
function getTypeFn(val) {
  let obj = props.options;
  return obj[val]?.type || '';
}
</script>
<style lang="scss" scoped>
.tableCell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tag_public {
  height: 20px;

  margin: 0 2px;
  padding: 0 8px;

  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
}
</style>
